<template>
  <div class="category_container">
    <topNavSecher ></topNavSecher>
    <div class="wrap_cent flex" style="margin-top: 40px;">
      <!-- 左侧导航 -->
      <div class="category_content">
        <div class="left_scroll">
          <div class="nav_list">
            <div v-for="(item,index) in ClassList.categoryL1List" :class="['nav_item', nacIndex == index ? 'active' : '']" @click="changeNavIndex(index,item.id)">{{ item.name }}</div>
          </div>
        </div>
      </div>
      <!-- 右侧内容 -->
      <div class="goos_content">
        <bannerList :imgUrl="rightImg"></bannerList>
        <div class="cateList" v-for="item in ClassItemList">
          <div class="text">{{ item.name }}</div>
          <ul class="list flex">
            <li class="cateItem flex_c" v-for="e in item.categoryList" @click="clickDetail(e)">
              <img
                :src="e.wapBannerUrl"
                class="cateImg">
                <div class="listTest">{{e.name}}</div>
            </li>
          </ul>
        </div>

      </div>
    </div>

  </div>
  <BackTopTo></BackTopTo>
</template>
<script setup lang="ts">
import { ref, onMounted } from 'vue';
import bannerList from '../../components/bannerList/index.vue'
import topNavSecher from '../../components/topNavSecher/index.vue'

import {getClassList,getItemList} from '../../api/calssList'
import type {classListModel} from '../../api/calssList'
import {useRouter} from 'vue-router'
//编程式路由导航
const router = useRouter()
//存储数据列表
const ClassList = ref<classListModel>({
  categoryGroupList: [],
  categoryL1List: [],
  categoryL2List: [],
  currentCategory: []
})
const islodaing = ref(false)
const clickDetail = (e:any)=>{
  let {superCategoryId,id,showIndex} = e
  router.push(`/Classify/details/${superCategoryId}/${id}/${showIndex}`)
}
const infoIndex = ref("")
//存储子列表
const ClassItemList = ref<any[]>([])
//储存右titlet图片
const rightImg = ref<string>('')
const nacIndex = ref(0)
const changeNavIndex = (num: number, id: number) => {
  nacIndex.value = num
  getClassItemList(id)
}

//封装分类
const getInfoList = async () => {
  try {
    let res = await getClassList()
    ClassList.value.categoryL1List = res.data.categoryL1List
    getClassItemList(res.data.categoryL1List[0].id)
  } catch (error) {
    console.log(error);
  }
}

const getClassItemList = async (id: number) => {
  islodaing.value = true
  try {
    let res = await getItemList(id)
    
    rightImg.value = res.data.currentCategory.bannerList[0].picUrl
    ClassItemList.value = res.data.categoryGroupList
    islodaing.value = false

  } catch (error) {
    console.log(error);
    islodaing.value = false

  }
}
onMounted(() => {
  getInfoList()
 
})

</script>

<style scoped lang="less">
.h {
  width: 100px;
  height: 100px;
}
/* 横向flex布局 */
.flex {
  display: flex;
}

/* 纵向flex布局 */
.flex_c {
  display: flex;
  flex-direction: column;
}

.topinput {
  width: 100%;
  height: 58px;
  background-color: #fff;

  &::after {
    content: '';
    display: block;
    clear: both;
  }

}

.topinput .topinput_itme .input {
  padding-top: 10px;
  border-bottom: 1px solid #ccc;
  background-color: #fff;
  position: fixed;
  background: #eee;
  margin: 5px;
  line-height: 5px;
  z-index: 1;

}

.leftnav_container {
  width: 80px;
  border-right: 1px solid #ccc;
}

/* 左侧导航 */
.category_container {
  height: 100%;
}

.category_content {
  position: fixed;
  height: 100%;
  width: 80px;
  z-index: 1;
}

.left_scroll {
  border-right: 1px solid #ccc;
  height: 100%;
  width: 80px;
}

.nav_list {
  width: 80px;
  min-height: 100%;
  // position: fixed;
  border-right: 1rpx solid #333;
}

.nav_list .nav_item {
  position: relative;
  height: 50px;
  line-height: 50px;
  text-align: center;
  font-size: 14px;
}

.nav_item.active {
  background: #fff;
  color: red;
}

.nav_item.active::before {
  position: absolute;
  left: 0;
  top: 15%;
  content: '';
  width: 4px;
  height: 70%;
  background: red;
}

// 右侧导航
.goos_content {
  width: 100%;
  margin-left: 80px;

  .cateList {
    margin-bottom: 40px;
    width: 100%;
    margin-bottom: 50px;

    ul.list {
      margin-top: 5px;
      width: 100%;
      flex-wrap: wrap;

      .cateItem {
        align-items: center;
        width: 33.3333%;
        text-align: center;

        .cateImg {
          width: 72px;
          height: 72px;

        }

        .listTest {
          font-size: 12px;
        }
      }

    }

    .text {
      padding-bottom: 8px;
      margin-left: 20px;
      font-size: 14px;
      font-weight: 700;
      border-bottom: 1px solid #ccc;
    }
  }
}
</style>